<template>
	<view class="detail-card"> 
		<view class="shop-title"> 
			<view class="title">{{shopDetail.merchant_name}}</view>
			<view class="consume">鲸囍到店消费</view>
		</view>
		<view class="shop-rate"> 
			<template v-for="n in fillNum" :key="n">
				<image class='rate-img' :src="sheep.$url.cdn('/static/icon/fill.png')"></image>
			</template>
			<template v-for="m in emptyNum" :key="m">
				<image class='rate-img' :src="sheep.$url.cdn('/static/icon/empty.png')"></image>
			</template>
			<view class="rate-label">{{shopDetail.star}}</view>
		</view>
		<!-- <view class="shop-score">
			<view class='score-label'>积</view>
			<view class="score-rate">20%</view>
		</view> -->
		<!-- <view class="shop-share" @click="showShareModal">
			<image :src="sheep.$url.cdn('/static/icon/share.png')" class="share-img"></image>
			<view class="share-title">分享</view>
		</view> -->
		<view class></view>
		<scroll-view class="scroll" scroll-x="true">
			<template v-for="(item,index) in shopDetail.imgs" :key="index">
				<image @tap.stop="onImgPreview(index)" :src="sheep.$url.cdn(item)" class="scroll-item "></image>
			</template>
			<!-- <image :src="sheep.$url.cdn('/storage/default/20250320/54aa996a6bf09dc04743ee294ecee9b0.jpeg')" class="scroll-item "></image>
			<image :src="sheep.$url.cdn('/storage/default/20250320/54aa996a6bf09dc04743ee294ecee9b0.jpeg')" class="scroll-item"></image>
			<image :src="sheep.$url.cdn('/storage/default/20250320/54aa996a6bf09dc04743ee294ecee9b0.jpeg')" class="scroll-item"></image>
			<image :src="sheep.$url.cdn('/storage/default/20250320/54aa996a6bf09dc04743ee294ecee9b0.jpeg')" class="scroll-item"></image>
			<image :src="sheep.$url.cdn('/storage/default/20250320/54aa996a6bf09dc04743ee294ecee9b0.jpeg')" class="scroll-item"></image> -->
		</scroll-view>
		<view class="shop-detail">
			<view class="business-address ss-p-y-10">
				<view class="time">营业时间：{{shopDetail.online_time}}</view>
				<view class="address">{{shopDetail.address}}</view>
			</view>
			<image @tap.stop="callNumber" :src="sheep.$url.cdn('/static/icon/phone.png')" class="phone-img"></image>
		</view>
		<view class="aptitude" @tap.stop="openLicense">
			<view class="aptitude-left">
				<image :src="sheep.$url.cdn('/static/icon/Schedule.png')" class="aptitude-img"></image>
				<view class="aptitude-label">查看商家资质</view>
				<!-- <view class="pay">支付未开通</view> -->
			</view>
			<uni-icons type="right" size="20"></uni-icons>
		</view>
		<!-- <view class="aptitude" @click="sheep.$router.go('/pages/commission/merchant/payfeeCode')">
			<view class="aptitude-left">
				<image :src="sheep.$url.cdn('/static/icon/Schedule.png')" class="aptitude-img"></image>
				<view class="aptitude-label">我的收款码</view>
			</view>
			<uni-icons type="right" size="20"></uni-icons>
		</view> -->
		
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { computed, reactive,ref,onMounted } from 'vue';
	
	import { showShareModal, closeShareModal, showAuthModal } from '@/sheep/hooks/useModal';
	const emit = defineEmits(['openLicense']);
	const rate = ref(2.0)
	
	const props = defineProps({
		rz_id: {
			type: [String,Number],
			default: '',
		},
		jj_id: {
			type: [String,Number],
			default: '',
		},
		
	});
	const shopDetail=ref({})
	// 预览图片
	function onImgPreview(current) {
		uni.previewImage({
		  urls: shopDetail.value.imgs,
		  current,
		});
	}
	
	function openLicense(){
		emit('openLicense',shopDetail.value.business_license)
	}
	
	async function openShopDetail(){
		const res = await sheep.$api.commission.merchant.getShopDetail({
			rz_id:props.rz_id,
			jj_id:props.jj_id,
		})
		shopDetail.value=res.data
		shopDetail.value.imgs=res.data.shop_image.split(',').map((item,index)=>sheep.$url.cdn(item+'?'+index))
		rate.value=shopDetail.value.star
	}
	
	onMounted(()=>{
		openShopDetail()
	})
	
	const emptyNum = computed(()=>{
		return 5-parseInt(rate.value);
	})
	
	const fillNum = computed(()=>{
		return parseInt(rate.value);
	})
	
	function callNumber(){
		uni.makePhoneCall({
			phoneNumber:shopDetail.value.mobile //仅为示例
		});
	}
	
	
</script>

<style lang="scss" scoped>
	.detail-card{
		position:relative;
		border-radius:20rpx ;
		background: #fff;
		margin:0rpx 12rpx;
		padding-left:6rpx;
		padding-bottom:18rpx;
		width:calc(100% - 24rpx - 6rpx);
		display:flex;
		flex-direction: column;
		
		.shop-title{
			display:flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width:calc(100% - 8rpx);
			margin-right: 6rpx;
			margin-left: 2rpx;
			height:48rpx;
			.title{
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				letter-spacing: normal;
				color: #3D3D3D;
			}
			.consume{
				background: #DFE8FF;
				box-sizing: border-box;
				border: 1rpx solid #153898;
				padding:3rpx 7rpx;
				font-family: Source Han Sans;
				font-size: 24rpx;
				font-weight: normal;
				line-height: 34rpx;
				text-align: center;
				
				color: #153898;
			}
		}
		.shop-rate{
			display:flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			margin-top:10rpx;
			height:30rpx;
			width:100%;
			.rate-img{
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}
			.rate-label{
				font-family: Source Han Sans;
				font-size: 32rpx;
				font-weight: 500;
				line-height:46rpx;;
				text-align: center;
				letter-spacing: normal;
				color: #FE5745;
				margin-left: 3rpx;;
			}
		}
		.shop-score{
			display:flex;
			flex-direction: row;
			justify-content: flex-start;
			background: #FBF1E8;
			height: 36rpx;
			width: 110rpx;
			margin-top:16rpx;
			margin-left: 6rpx;
			.score-label{
				background: linear-gradient(313deg, #05D5BF 0%, #06C2AE 50%, #A2CEFD 100%);
				font-family: Source Han Sans;
				font-size: 24rpx;
				font-weight: normal;
				line-height: normal;
				
				letter-spacing: normal;
				color: #FFFFFF;
				padding:0 8rpx;
				
				display:flex;
				justify-content: center;
				align-items: center;
				
			}
			.score-rate{
				width: 50rpx;
				font-family: Source Han Sans;
				font-size: 24rpx;
				font-weight: normal;
				line-height: 34rpx;;
				
				letter-spacing: normal;
				color: #05CEB9;
				text-align: center;
				padding-top:1rpx;
				
				margin-left:10rpx;
			}
		}
		.shop-share{
			position:absolute;
			display:flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			right:24rpx;
			top:70rpx;
			
			height:40rpx;
			.share-img{
				width: 20px;
				height: 20px;
			}
			.share-title{
				margin-left: 8rpx;
				opacity: 1;
				
				font-family: Source Han Sans;
				font-size: 36rpx;
				font-weight: normal;
				line-height: 40rpx;
				
				letter-spacing: 0em;
				
				
				color: #153898;
			}
		}
		.shop-detail{
			margin-top:16rpx;
			display:flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-top: solid 1rpx #EAEAEA;
			padding:10rpx 20rpx 10rpx 14rpx;;
			
			.business-address{
				display:flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-start;
				line-height: 1.5em;
				.time{
					font-family: Source Han Sans;
					font-size: 32rpx;
					font-weight: 500;
					text-align: right;
					letter-spacing: normal;
					color: #05CEB9;
				}
				.address{
					
					font-family: Source Han Sans;
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: normal;
					color: #3D3D3D;
					
					margin-top:30rpx;
				}
			}
			.phone-img{
				width:48rpx;
				height:48rpx;
			}
		}
		.aptitude{
			display:flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-top: solid 1rpx #EAEAEA;
			height:50rpx;
			padding:14rpx;
			width:calc(100% - 14rpx);
			.aptitude-left{
				display:flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				
				width:calc(100% - 14rpx);
				.aptitude-img{
					width:60rpx;
					height:60rpx;
				}
				
				.aptitude-label{
					font-family: Source Han Sans;
					font-size: 28rpx;
					font-weight: normal;
					line-height: 34rpx;
					
					letter-spacing: normal;
					color: #797979;
					margin-left: 14rpx;;
				}
				.pay{
					height: 36rpx;
					border-radius: 8rpx;
					padding:10rpx;
					margin-left: 14rpx;
					
					border-radius: 4rpx;
					background: #D8D8D8;
					margin-left: 40rpx;;
				}
				
			}
			
			
		}
	}
	
	.scroll {
		white-space: nowrap;
		width: 100%;
		margin-top:20rpx;
		height:188rpx;
	}
	.scroll-item{
		display: inline-block;
		width: 200rpx;
		height: 168rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}
	.scroll-view-item_H:first-child{
		margin-right: 20rpx;
	}
	.scroll-view-item_H:last-child{
		margin-left: 20rpx;
	}
</style>